<template>
  <div class="pageTwo">
    <div class="one-tit">
      产品质量状况分析
    </div>
    <div class="left-box">
      <div class="tab-grounp">
        <a href="javascript:;" v-for="item in tabList" :class="{'activeA':activeIndex===item.type}" @click="tabFun(item.type)">{{item.name}}</a>
      </div>
      <div class="county-case-box">
        <div class="moduleTit-box">
          <div class="module-tit">
            <img src="../assets/img/tit-point.png" alt="">
            <span>上个月全市产品质量监督抽查各区县情况</span>
            <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
          </div>
        </div>
        <div class="county-case-data" ref="countyCase">

        </div>
        <div class="moduleTit-box">
          <div class="module-tit">
            <img src="../assets/img/tit-point.png" alt="">
            <span>上个月监督抽查产品质量情况</span>
            <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
          </div>
        </div>
        <div class="county-case-data" ref="qualityCase">

        </div>
        <div class="moduleTit-box">
          <div class="module-tit">
            <img src="../assets/img/tit-point.png" alt="">
            <span>上个月全市各区县不合格产品检出率</span>
            <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
          </div>
        </div>
        <div class="county-case-data qualityProba" ref="qualityProba">

        </div>
      </div>
    </div>
    <div class="middle-box">
      <div class="moduleTit-box">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>上个月产品质量申诉情况</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="complaint-box" ref="complaintData">

      </div>
      <div class="moduleTit-box">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>受理产品类型占比</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="productType-box" ref="productTypeData">

      </div>
      <div class="moduleTit-box">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>受理最多的五类产品类型</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="pTypeTop-box" ref="pTypeTopData">

      </div>
    </div>
    <div class="middl-right-box">
      <div class="moduleTit-box">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>监督执法</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="supersive-box" ref="supersiveData">

      </div>
      <div class="moduleTit-box" style="margin-top: 100px">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>特种设备安全情况</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="sercuty-box" ref="sercutyData">

      </div>
    </div>
    <div class="right-box">
      <div class="moduleTit-box">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>近10年质量获奖单位数量</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="getPrize-box" ref="getPrizeData">

      </div>
      <div class="moduleTit-box" style="margin-top: 100px">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>今年获奖单位行业占比</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="getPrizeZhanbi-box" ref="getPrizeZhanbi">

      </div>
      <div class="moduleTit-box">
        <div class="module-tit">
          <img src="../assets/img/tit-point.png" alt="">
          <span>制定发布实施标准</span>
          <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
        </div>
      </div>
      <div class="standard-box" ref="standardData">

      </div>
    </div>
    <!--<div class="radar-box pull-left" ref="radarBox">-->

    <!--</div>-->
    <!--<div class="produc-per pull-left" ref="producPer">-->

    <!--</div>-->
  </div>
</template>

<script>
  import {standardOption,piePrizeOption,getPriceOption,secutyCaseOption,countyCaseOption,qualityCaseOption,radarOption,complaintOption,productTypeOption,pTypeTopOption,supersiveOption} from '../lib/js/pageTwo';
export default {
  name: 'pageTwo',
  data () {
    return {
      interVal:'',
      interVal1:"",
      activeIndex:1,
      tabList:[
        {
          name:'国抽',
          type:1,
        },{
          name:'省抽',
          type:2
        },{
          name:'市抽',
          type:3
        },{
          name:'企业送检',
          type:4
        }
      ],
      countyCase:{},
      qualityCase:{},
      radarData:{},
      complaintData:{
        numList:[80,240,90,108],
        tongbiList:[7,13,75,10],
        huanbiList:[75,20,60,78]
      },
      inStitucolor:[
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2:1,
          y2:1,
          colorStops: [{
            offset: 0, color: '#fa827e' // 0% 处的颜色
          }, {
            offset: 1, color: '#f7cdcb' // 100% 处的颜色
          }],
        },{
          type: 'radial',
          x: 0,
          y: 0,
          r: 1,
          colorStops: [{
            offset: 0, color: '#36b33a' // 0% 处的颜色
          }, {
            offset: 1, color: '#ade6f8' // 100% 处的颜色
          }],
        },{
          type: 'radial',
          x: 0,
          y: 0,
          r: 1,
          colorStops: [{
            offset: 0, color: '#76c999' // 0% 处的颜色
          }, {
            offset: 1, color: '#bab6d3' // 100% 处的颜色
          }],
        },{
          type: 'radial',
          x: 0,
          y: 0,
          r: 1,
          colorStops: [{
            offset: 0, color: '#fddb7a' // 0% 处的颜色
          }, {
            offset: 1, color: '#fef5d8' // 100% 处的颜色
          }],
        }],
      productTypeData:[
        {
          name:'家电',
          value: 8,
        },{
          name:'汽配',
          value: 10,
        },{
          name:'农资',
          value: 6,
        },{
          name:'能源',
          value: 9,
        },{
          name:'棉花',
          value: 10,
          labelLine:{
            show:true
          }
        },{
          name:'建材',
          value: 10,
        },{
          name:'玩具',
          value: 30,
        },{
          name:'计量',
          value: 40,
        },{
           name:'化工',
           value: 31,
        },{
          name:'日用消费品',
          value: 50,
        }
      ],
      pTypeTopData:[
        {
          data:[20,100,60,78,10]
        },
        {
          data:[40,10,60,48,20]
        },
        {
          data:[30,15,37,21,90]
        },
        {
          data:[20,100,60,40,10]
        },
        {
          data:[20,10,60,78,10]
        }
      ],
      supersiveData:[6,17,23,83],
      secutyData:[
        {
          data:[90, 200, 100, 70, 89]
        },{
          data: [40, 210, 36, 60, 80]
        },{
          data: [40, 20, 36, 60, 80],
        },{
          data: [90, 200, 100, 70, 89],
        }
      ],
      getPriceData:[57,85,90,103,80,120,56,90,78,190],
      getPrizePieData:[
        {
          name:'批发业',
          value:12531,
          percent:'20.3%'
        },
        {
          name:'零售业',
          value:26392,
          percent:'45.2%'
        },
        {
          name:'仓储业',
          value:2738,
          percent:'10.1%'
        },{
          name:'邮政业',
          value:5283,
          percent:'15.1%'
        },{
          name:'住宿业',
          value:8319,
          percent:'18.3%'
        },{
          name:'餐饮业',
          value:13271,
          percent:'26.3%'
        },{
          name:'商务服务业',
          value:1462,
          percent:'6.3%'
        },{
          name:'居民服务业',
          value:753,
          percent:'5.1%'
        },{
          name:'机动车、电子产品、日用产品修理业',
          value:4217,
          percent:'10.9%'
        },{
          name:'金属制品、机械和设备修理业',
          value:739,
          percent:'5.6%'
        },{
          name:'废弃资源综合利用业',
          value:352,
          percent:'0.3%'
        },{
          name:'其他服务业',
          value:5281,
          percent:'16.9%'
        },
      ],
      standardData:[90,100,200,178,109],
    }
  },
  mounted(){
    //上个月产品质量申诉情况
    this.complaintData.numList.forEach((item,index)=>{
      complaintOption.series[0].data[index].value=item
    });
    complaintOption.series[2]['data']=this.complaintData.tongbiList
    complaintOption.series[3]['data']=this.complaintData.huanbiList
    this.createCanvas(complaintOption,'complaintData')
    //受理产品类型占比
    let indexActive=0
    this.productTypeData.forEach((item,index)=>{
      if(indexActive>3)
        indexActive=0;
      let js={
        name:item.name,
        value:item.value,
        itemStyle:{
          color:''
        }
      }
      js['itemStyle']['color']=this.inStitucolor[indexActive]
      productTypeOption.series[0].data.push(js)
      indexActive++;
    });
    this.createCanvas(productTypeOption,'productTypeData')
    //受理最多的五种类型产品
    this.pTypeTopData.forEach((item,index)=>{
      if(index>3)return
      pTypeTopOption.series[index]['data']=item.data;
    });
    this.createCanvas(pTypeTopOption,'pTypeTopData')
    //监督执法
    this.supersiveData.forEach((item,index)=>{
      supersiveOption.series[1].data[index].value=item;
    });
    this.createCanvas(supersiveOption,'supersiveData');
    //特种设备安全情况
    this.secutyData.forEach((item,index)=>{
      secutyCaseOption.series[index].data=item.data;
    });
    this.createCanvas(secutyCaseOption,'sercutyData')
    //近十年单位获奖情况
    getPriceOption.series[0].data=this.getPriceData
    this.createCanvas(getPriceOption,'getPrizeData')
    //今年获奖单位行业占比
    this.getPrizePieData.forEach((item,index)=>{
      let newData={
        name:'',
        value:'',
      }
      newData.value=item.value;
      piePrizeOption.series[0].data.push(newData);
      piePrizeOption.series[1].data.push(item);
    });
    this.createCanvas(piePrizeOption,'getPrizeZhanbi')
    //发布实施标准
    this.standardData.forEach((item,index)=>{
      standardOption.series[0].data[index].value=item;
    });
    this.createCanvas(standardOption,'standardData');
//    随机动画
    this.randomFun();
//    轮播
    this.randomFun1();
  },
  methods:{
    randomFun1(){
      clearTimeout(this.interVal1)
      this.activeIndex++;
      if(this.activeIndex>4){
        this.activeIndex=1
      }
      this.tabFun(this.activeIndex)
      this.interVal1=setTimeout(this.randomFun1,6000);
    },
    randomFun(){
      clearTimeout(this.interVal)
      let index=parseInt(Math.random()*8);
      switch(index){
        case 0:
          this.createCanvas(complaintOption,'complaintData')
          break;
        case 1:
          this.createCanvas(productTypeOption,'productTypeData')
          break;
        case 2:
          this.createCanvas(pTypeTopOption,'pTypeTopData')
          break;
        case 3:
          this.createCanvas(supersiveOption,'supersiveData');
          break;
        case 4:
          this.createCanvas(secutyCaseOption,'sercutyData')
          break;
        case 5:
          this.createCanvas(getPriceOption,'getPrizeData')
          break;
        case 6:
          this.createCanvas(piePrizeOption,'getPrizeZhanbi')
          break;
        case 7:
          this.createCanvas(standardOption,'standardData');
          break;
      }
      this.interVal=setTimeout(this.randomFun,3000);
    },
    tabFun(type){
      this.activeIndex=type;
      this.countyCase={
        "entrepreneur":[160,131,150,110,120,130,140,111,110,130,120],
        "qualified":[70,30,60,70,80,100,30,50,60,80,60],
        "noQualified":[14,7,10,15,18,9,17,20,15,18,14],
        "noQualifL":[8,9,1,9,20,10,20,10,30,31,9]
      }
      this.qualityCase={
        "entrepreneur":[140,100,130,110,130,100,110,130,110,90,100],
        "qualified":[10,30,123,100,14,10,30,123,100,140,190],
        "noQualified":[2,4,10,15,18,9,17,20,15,18,90],
        "qualifL":[9,10,3,4,22,10,10,30,40,22,17]
      }
      this.radarData={
        indicator:[
          { name: '桃城区', max: 300},
          { name: '冀州市', max: 300},
          { name: '枣强县', max: 300},
          { name: '武邑', max: 300},
          { name: '武强', max: 300},
          { name: '饶阳', max: 300},
          { name: '安平', max: 300},
          { name: '故城县', max: 300},
          { name: '景县', max: 300},
          { name: '阜城县', max: 300},
          { name: '深州市', max: 300}
        ],
        data:[
          {
            value : [151, 233, 162, 138, 244, 159,152,241,144,139,150,142,229],
            name : '企业家数',
          },{
            value : [134, 222, 153, 138, 249, 128,136,153,123,142,138,135,229],
            name : '抽查批次',
          },{
            value : [120, 220, 205, 0, 102, 193,100,141,123,114,241,123,221],
            name : '不合格批次',
          },{
            value : [111, 221, 131, 210, 111, 132,111,212,111,131,112,131,111],
            name : '不合格率',
          }
        ]
      }
      //上月抽查情况
      Object.keys(this.countyCase).forEach((item,index)=>{
        countyCaseOption.series[index].data=this.countyCase[item];
      })
      this.createCanvas(countyCaseOption,'countyCase')
      //上月产品质量监督情况
      Object.keys(this.qualityCase).forEach((item,index)=>{
        qualityCaseOption.series[index].data=this.qualityCase[item];
      })
      this.createCanvas(qualityCaseOption,'qualityCase')
      //不合格产品检出率
      radarOption.radar.indicator=this.radarData.indicator;
      this.radarData.data.forEach((item,index)=>{
        radarOption.series[0].data[index].name=item['name'];
        radarOption.series[0].data[index].value=item['value'];
      });
      this.createCanvas(radarOption,'qualityProba');
    },
    createCanvas(option,refName){
      let eleM=this.$refs[refName];
      let myChart = this.$echarts.init(eleM);
      myChart.clear();
      option['animation']=true;
      option['animationDuration']=1000;
      option['animationEasing']='cubicOut'
      myChart.setOption(option);
    },
  }
}
</script>

<style scoped lang="scss">
  @import "pageTwo";
</style>
